<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

    <div id="app" >
        <!--头-->
        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>

            </el-header>
            <!--            新增按钮-->
            <el-button type="primary" style="width: 90px" @click="handleEdit('add')">新增</el-button>
            <!--        新增对话框-->
            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="30%">

                <el-form ref="form" :model="tableData" label-width="80px">
                    <el-form-item label="活动名称">
                        <el-input v-model="tableData.name"></el-input>
                    </el-form-item>
                    <el-form-item label="活动形式">
                        <el-input type="textarea" v-model="tableData.desc"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit()">立即创建</el-button>
                        <el-button @click="dialogVisible = true">取消</el-button>
                    </el-form-item>
                </el-form>

            </el-dialog>
        </el-container>

        <!--显示体-->
        <el-main>
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            label="日期"
                            width="180">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.date }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="姓名"
                            width="180">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                                <p>姓名: {{ scope.row.name }}</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ scope.row.name }}</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            :formatter="formatter">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-main>

    </div>
<script>
    new Vue({
        el:"#app",
        data(){
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return{
                tableData: Array(5).fill(item),     //展示的数据
                dialogVisible: false,
            }
        },
        mounted(){
            // 页面加载完成后，发送异步请求，查询数据
            var _this = this;
            axios({
                method:"get",
                url:"selectAllServlet"
            }).then(function (resp) {
                _this.tableData = resp.data;
            })
        },
        methods: {
            handleEdit(row) {    //编辑按钮单击事件
                if(row == 'add'){

                }else {
                    //如果是编辑,然后将数据放到容器上让其显示；点击确认按钮的时候就提交上

                }

                //新增和编辑共用，会到对话框中继续下一步的处理
                this.dialogVisible = true;
                console.log(index, row);
            },
            handleDelete(row) {    //删除按钮单击事件
                axios({
                    url: "selectAllServlet",
                    method: 'delete',
                    params: { row }  //改一下 row.id
                }).then(res => {
                    if (res.code === 1) {
                        this.$message.success('删除成功！')
                        // this.handleQuery()
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },
            onSubmit() {                    //提交事件，发起异步事件，添加/修改数据
                var _this = this;
                axios({
                    method:"post",
                    url:"selectAllServlet",
                    data:_this.tableData
                }).then(function (resp) {
                    if (resp.code === 1) {
                        this.$message.success('修改/新增成功！')
                        this.dialogVisible = false
                    } else {
                        this.$message.error(resp.msg || '操作失败')
                    }
                })
            }
        }

    })
</script>


</body>
</html>